1 سبتمبر 2025العربية

استكشف خطاف useActionState في React لإدارة الحالة المبسطة التي تطلقها الإجراءات غير المتزامنة. عزز كفاءة تطبيقك وتجربة المستخدم.

تنفيذ React useActionState: إدارة الحالة القائمة على الإجراءات

يقدم خطاف useActionState في React، الذي تم تقديمه في الإصدارات الحديثة، نهجًا محسنًا لإدارة تحديثات الحالة الناتجة عن الإجراءات غير المتزامنة. هذه الأداة القوية تبسط عملية التعامل مع التعديلات، وتحديث واجهة المستخدم، وإدارة حالات الخطأ، خاصة عند العمل مع مكونات خادم React (RSC) وإجراءات الخادم. سيستكشف هذا الدليل تعقيدات useActionState، مع تقديم أمثلة عملية وأفضل الممارسات للتنفيذ.

فهم الحاجة إلى إدارة الحالة القائمة على الإجراءات

غالبًا ما تتضمن إدارة الحالة التقليدية في React إدارة حالات التحميل والخطأ بشكل منفصل داخل المكونات. عندما يؤدي إجراء ما (مثل إرسال نموذج، جلب بيانات) إلى تحديث الحالة، عادةً ما يدير المطورون هذه الحالات باستخدام استدعاءات متعددة لـ useState ومنطق شرطي قد يكون معقدًا. يوفر useActionState حلاً أكثر نظافة وتكاملاً.

لنأخذ سيناريو بسيط لإرسال نموذج. بدون useActionState، قد يكون لديك:

متغير حالة لبيانات النموذج.
متغير حالة لتتبع ما إذا كان النموذج قيد الإرسال (حالة التحميل).
متغير حالة للاحتفاظ بأي رسائل خطأ.

يمكن أن يؤدي هذا النهج إلى تعليمات برمجية مطولة وتناقضات محتملة. يدمج useActionState هذه الاهتمامات في خطاف واحد، مما يبسط المنطق ويحسن قابلية قراءة الكود.

تقديم useActionState

يقبل خطاف useActionState وسيطتين:

دالة غير متزامنة ("الإجراء") تقوم بتحديث الحالة. يمكن أن يكون هذا إجراء خادم أو أي دالة غير متزامنة.
قيمة حالة أولية.

يقوم بإرجاع مصفوفة تحتوي على عنصرين:

قيمة الحالة الحالية.
دالة لإرسال الإجراء. تدير هذه الدالة تلقائيًا حالات التحميل والخطأ المرتبطة بالإجراء.

إليك مثال أساسي:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Failed to update server.';
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

في هذا المثال:

updateServer هو الإجراء غير المتزامن الذي يحاكي تحديث الخادم. يستقبل الحالة السابقة وبيانات النموذج.
يقوم useActionState بتهيئة الحالة بـ 'Initial State' ويعيد الحالة الحالية ودالة dispatch.
تقوم دالة handleSubmit باستدعاء dispatch مع بيانات النموذج. يعالج useActionState تلقائيًا حالات التحميل والخطأ أثناء تنفيذ الإجراء.

التعامل مع حالات التحميل والخطأ

إحدى الفوائد الرئيسية لـ useActionState هي إدارته المدمجة لحالات التحميل والخطأ. تعيد دالة dispatch وعدًا (promise) يتم حله بنتيجة الإجراء. إذا ألقى الإجراء خطأ، يتم رفض الوعد مع الخطأ. يمكنك استخدام هذا لتحديث واجهة المستخدم وفقًا لذلك.

قم بتعديل المثال السابق لعرض رسالة تحميل ورسالة خطأ:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error during submission:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Name:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

التغييرات الرئيسية:

أضفنا متغيرات الحالة isSubmitting و errorMessage لتتبع حالات التحميل والخطأ.
في handleSubmit، قمنا بتعيين isSubmitting إلى true قبل استدعاء dispatch والتقاط أي أخطاء لتحديث errorMessage.
نقوم بتعطيل زر الإرسال أثناء الإرسال وعرض رسائل التحميل والخطأ بشكل شرطي.

استخدام useActionState مع إجراءات الخادم في مكونات خادم React (RSC)

يتألق useActionState عند استخدامه مع مكونات خادم React (RSC) وإجراءات الخادم. إجراءات الخادم هي دوال تعمل على الخادم ويمكنها تعديل مصادر البيانات مباشرة. تسمح لك بأداء عمليات من جانب الخادم دون كتابة نقاط نهاية API.

ملاحظة: يتطلب هذا المثال بيئة React مهيأة لمكونات الخادم وإجراءات الخادم.


// app/actions.js (Server Action)
'use server';

import { cookies } from 'next/headers'; //Example, for Next.js

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Please enter a name.';
  }

  try {
    // Simulate database update.
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Updated name to: ${name}`; //Success!

  } catch (error) {
    console.error("Database update failed:", error);
    return 'Failed to update name.'; // Important: Return a message, not throw an Error
  }
}


// app/page.jsx (React Server Component)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

export default MyComponent;

في هذا المثال:

updateName هو إجراء خادم محدد في app/actions.js. يستقبل الحالة السابقة وبيانات النموذج، ويحدّث قاعدة البيانات (بشكل محاكى)، ويعيد رسالة نجاح أو خطأ. الأهم من ذلك، أن الإجراء يعيد رسالة بدلاً من إلقاء خطأ. تفضل إجراءات الخادم إعادة رسائل إعلامية.
تم تمييز المكون كمكون عميل ('use client') لاستخدام خطاف useActionState.
تقوم دالة handleSubmit باستدعاء dispatch مع بيانات النموذج. يدير useActionState تحديث الحالة تلقائيًا بناءً على نتيجة إجراء الخادم.

اعتبارات هامة لإجراءات الخادم

معالجة الأخطاء في إجراءات الخادم: بدلاً من إلقاء الأخطاء، قم بإعادة رسالة خطأ ذات معنى من إجراء الخادم الخاص بك. سيعامل useActionState هذه الرسالة كحالة جديدة. هذا يسمح بمعالجة الأخطاء برشاقة من جانب العميل.
التحديثات المتفائلة: يمكن استخدام إجراءات الخادم مع التحديثات المتفائلة لتحسين الأداء المتصور. يمكنك تحديث واجهة المستخدم على الفور والتراجع إذا فشل الإجراء.
إعادة التحقق (Revalidation): بعد تعديل ناجح، فكر في إعادة التحقق من البيانات المخزنة مؤقتًا لضمان أن واجهة المستخدم تعكس أحدث حالة.

تقنيات متقدمة لـ useActionState

١. استخدام Reducer لتحديثات الحالة المعقدة

لمنطق حالة أكثر تعقيدًا، يمكنك دمج useActionState مع دالة reducer. هذا يسمح لك بإدارة تحديثات الحالة بطريقة يمكن التنبؤ بها وصيانتها.


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Initial State',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // Simulate asynchronous operation.
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Count: {state.count}
      Message: {state.message}
      
      
      
    
  );
}

٢. التحديثات المتفائلة مع useActionState

تحسن التحديثات المتفائلة تجربة المستخدم عن طريق تحديث واجهة المستخدم على الفور كما لو كان الإجراء ناجحًا، ثم التراجع عن التحديث إذا فشل الإجراء. هذا يمكن أن يجعل تطبيقك يبدو أكثر استجابة.


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // Simulate an asynchronous server update.
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Initial Name');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // Update on success
    } catch (error) {
      // Revert on error
      console.error("Update failed:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // Optimistically update UI
    await dispatch(newName);
  }

  return (
    
      Name:
      
      
      Current Name: {name}
      State: {state}
    
  );
}

٣. تأخير تنفيذ الإجراءات (Debouncing)

في بعض السيناريوهات، قد ترغب في تأخير تنفيذ الإجراءات لمنع إرسالها بشكل متكرر. يمكن أن يكون هذا مفيدًا لسيناريوهات مثل حقول البحث حيث تريد فقط تشغيل إجراء بعد توقف المستخدم عن الكتابة لفترة معينة.


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // Simulate asynchronous search.
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Search results for: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Initial State');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // Debounce for 300ms

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Search:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

أفضل الممارسات لاستخدام useActionState

حافظ على نقاء الإجراءات: تأكد من أن إجراءاتك هي دوال نقية (أو قريبة من ذلك قدر الإمكان). لا ينبغي أن يكون لها آثار جانبية بخلاف تحديث الحالة.
تعامل مع الأخطاء برشاقة: تعامل دائمًا مع الأخطاء في إجراءاتك وقدم رسائل خطأ إعلامية للمستخدم. كما هو مذكور أعلاه مع إجراءات الخادم، فضل إعادة سلسلة رسالة خطأ من إجراء الخادم، بدلاً من إلقاء خطأ.
تحسين الأداء: كن على دراية بالآثار المترتبة على أداء إجراءاتك، خاصة عند التعامل مع مجموعات بيانات كبيرة. فكر في استخدام تقنيات الحفظ المؤقت (memoization) لتجنب إعادة العرض غير الضرورية.
مراعاة إمكانية الوصول: تأكد من أن تطبيقك يظل متاحًا لجميع المستخدمين، بما في ذلك ذوي الإعاقة. قدم سمات ARIA المناسبة والتنقل عبر لوحة المفاتيح.
الاختبار الشامل: اكتب اختبارات الوحدة واختبارات التكامل لضمان عمل إجراءاتك وتحديثات حالتك بشكل صحيح.
التدويل (i18n): للتطبيقات العالمية، قم بتنفيذ i18n لدعم لغات وثقافات متعددة.
التوطين (l10n): قم بتخصيص تطبيقك لمناطق محلية محددة من خلال توفير محتوى مترجم وتنسيقات تاريخ ورموز عملات محلية.

مقارنة useActionState بحلول إدارة الحالة الأخرى

بينما يوفر useActionState طريقة ملائمة لإدارة تحديثات الحالة القائمة على الإجراءات، إلا أنه ليس بديلاً لجميع حلول إدارة الحالة. للتطبيقات المعقدة ذات الحالة العامة التي تحتاج إلى المشاركة عبر مكونات متعددة، قد تكون مكتبات مثل Redux أو Zustand أو Jotai أكثر ملاءمة.

متى تستخدم useActionState:

تحديثات حالة بسيطة إلى متوسطة التعقيد.
تحديثات الحالة المرتبطة ارتباطًا وثيقًا بالإجراءات غير المتزامنة.
التكامل مع مكونات خادم React وإجراءات الخادم.

متى تفكر في حلول أخرى:

إدارة حالة عامة معقدة.
الحالة التي تحتاج إلى مشاركتها عبر عدد كبير من المكونات.
ميزات متقدمة مثل تصحيح الأخطاء عبر الزمن (time-travel debugging) أو البرمجيات الوسيطة (middleware).

الخاتمة

يقدم خطاف useActionState في React طريقة قوية وأنيقة لإدارة تحديثات الحالة التي تطلقها الإجراءات غير المتزامنة. من خلال دمج حالات التحميل والخطأ، فإنه يبسط الكود ويحسن قابلية القراءة، خاصة عند العمل مع مكونات خادم React وإجراءات الخادم. فهم نقاط قوته وقيوده يسمح لك باختيار النهج الصحيح لإدارة الحالة لتطبيقك، مما يؤدي إلى كود أكثر قابلية للصيانة وكفاءة.

باتباع أفضل الممارسات الموضحة في هذا الدليل، يمكنك الاستفادة بشكل فعال من useActionState لتحسين تجربة المستخدم وسير عمل التطوير في تطبيقك. تذكر أن تأخذ في الاعتبار مدى تعقيد تطبيقك واختيار حل إدارة الحالة الذي يناسب احتياجاتك على أفضل وجه. من عمليات إرسال النماذج البسيطة إلى تعديلات البيانات المعقدة، يمكن أن يكون useActionState أداة قيمة في ترسانة تطوير React الخاصة بك.